<template>
    <a-button type="primary" @click="showDrawer">
        <template #icon><PlusOutlined /></template>
        新增用户
    </a-button>
    <a-drawer
        title="新建用户"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
    >
        <a-form :model="form" :rules="rules" layout="vertical" ref="formRef">
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="用户名" name="name">
                        <a-input v-model:value="form.name" placeholder="请输入用户名" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="用户类型" name="type">
                        <a-select v-model:value="form.type" placeholder="请选择用户类型">
                            <a-select-option value="1">管理员</a-select-option>
                            <a-select-option value="0">普通用户</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="邮箱" name="email">
                        <a-input v-model:value="form.email" placeholder="请输入注册邮箱" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="注册时间" name="dateTime">
                        <a-date-picker
                            v-model:value="form.dateTime"
                            style="width: 100%"
                            :get-popup-container="trigger => trigger.parentElement"
                        />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="密码" name="password">
                        <a-input v-model:value="form.password" placeholder="请输入密码" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" :loading="iconLoading" @click="submitNewAccount">提交</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>

<script>
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref } from 'vue';
import axios from 'axios'; // 引入 axios

export default defineComponent({
    components: {
        PlusOutlined,
    },
    setup(_, { emit }) {
        const form = reactive({
            name: '',
            type: '',
            email: '',
            dateTime: null,
            password: '',
        });

        const rules = {
            name: [{ required: true, message: '用户名不能为空！' }],
            type: [{ required: true, message: '用户类型不能为空！' }],
            email: [{ required: true, message: '注册邮箱不能为空！', type: 'email' }],
            dateTime: [{ required: true, message: '请选择注册日期！', type: 'object' }],
            password: [{ required: true, message: '请输入密码！'}],
        };

        const visible = ref(false);
        const showDrawer = () => {
            visible.value = true;
        };
        const onClose = () => {
            visible.value = false;
        };

        //提交按钮加载动画
        const iconLoading = ref(false);
        const formRef = ref(null); // 获取表单实例

        const submitNewAccount = async () => {
            // 调用 validate 方法对整个表单进行校验
            formRef.value.validate().then(async () => {
                try {
                    // 新建用户请求提交，开启加载动画
                    iconLoading.value = true;

                    // 构造提交数据
                    const postData = {
                        username: form.name,
                        is_superuser: form.type,
                        email: form.email,
                        dateTime: form.dateTime,
                        password: form.password,
                    };

                    // 发送 POST 请求到后端接口
                    await axios.post('http://localhost:8000/api/adduser/', postData);

                    // 处理返回结果
                    alert('用户新增成功!');

                    // 提交完毕，关闭动画
                    iconLoading.value = false;

                    // 关闭抽屉
                    onClose();

                    // 新建用户成功，向父组件发送刷新列表请求
                    emit('refresh');

                } catch (error) {
                    alert('用户新增失败!');
                    console.log(error);
                    iconLoading.value = false;
                    // 关闭抽屉
                    onClose();
                }
            }).catch((error) => {
                console.log('表单验证失败:', error);
            });
        };

        return {
            form,
            rules,
            visible,
            showDrawer,
            onClose,
            submitNewAccount,
            iconLoading,
            formRef, // 返回表单引用
        };
    },
});
</script>

<style>
</style>
